<template>
    <div class="page">
        <!--pages/buyDrug/buyDrug.wxml-->
        <div class='doctor-info-wrap column'>
            <img class='info-bg' src='../assets/header-bg.png' ></img>
            <div class='doctor-info column wrap'>
                <div class='doctor border flex'>
                    <img :src='recipeDetail.avatar'  class='imgActive'></img>
                    <div class='info column'>
                        <span class='name'>{{recipeDetail.doctorname}}</span>
                        <span class='overhidden intro'>{{recipeDetail.orgname}}   {{recipeDetail.descr}}</span>
                    </div>
                </div>
                <div class='doctor border flex'>
                    <span class='label'>患者：</span>
                    <span>{{recipeDetail.patient_name}}</span>
                </div>
                <div class='doctor border flex'>
                    <span class='label'>诊断：</span>
                    <span>{{recipeDetail.discrim}}</span>
                </div>
                <div class='doctor flex'>
                    <span class='label'>药方用量：</span>
                    <span>共{{recipeDetail.quantity}}剂</span>
                </div>
            </div>
        </div>
        <div class='recipe-wrap column'>
            <div class='title'>处方</div>
            <div class='recipe column'>
                <div class='status-wrap border flex' v-if="recipeDetail.preview_recipe == 0">
                    <span class='status'>购药后可查看药方</span>
                    <span class='total'>共{{recipeDetail.warenumber}}味</span>
                </div>
                <div class='status-wrap border flex' v-if="recipeDetail.preview_recipe == 1">
                    <span class='content'>{{recipeDetail.span}}</span>
                </div>
                <div class='status-wrap flex' v-if="recipeDetail.preview_recipe == 1">
                    <span class='quantity flex'>共{{recipeDetail.quantity}}剂，每日{{recipeDetail.perday_qty}}剂，每剂分{{recipeDetail.per_count}}次服用</span>
                </div>
                <div class='tips border margin flex'>注：本药方只针对本次患者就诊，非患者本人或病情改变请重新咨询购药</div>
                <div class='durg-wrap column'>
                    <div class='durg-item column'>
                        <div class="flex durg-intro">
                            <div class='durg-left flex'>
                                <img :src='recipeDetail.drugstateicon' class='imgActive' ></img>
                            </div>
                            <div class='durg-right flex'>
                                <div class='durg-name column'>
                                    <span>{{recipeDetail.drugstatename}}</span>
                                    <span class='intro'>{{recipeDetail.drugstatedescr}}</span>
                                </div>
                                <div class='question overhidden flex' @click='godurgIntro(recipeDetail.drugstateid,recipeDetail.drugstatename)'>什么是{{recipeDetail.drugstatename}}？</div>
                            </div>
                        </div>
                        <div class='instand column' v-if="recipeDetail.drugstatedjdaflag == 1">
                            <div class='instand-up flex' @click='instandTap'>
                                <img :src="instand?selectActive:select"></img>
                                <span>代煎服务   {{daijian_money}}元/剂</span>
                            </div>
                            <div class='instand-down flex'>本处方有{{recipeDetail.quantity}}剂，服务费
                                <span>{{recipeDetail.service_fee}}元</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='get-way-wrap column wrap'>
            <div class='title'>取药方式：</div>
            <div class='get-wrap way-one flex' @click='chooseAddressTap'>
                <div class='way-left flex'>
                    <img :src="getWay?circle:circleActive"></img>
                    <span class='label'>快递寄送</span>
                </div>
                <div class='way flex'>
                  <span class='address overhidden'>{{username}}{{phone}}{{myAddress}}</span>
                  <div class='choose'>选择地址></div>
                </div>
            </div>
            <div class='get-wrap way-two flex' v-if="recipeDetail.paisong_status == 0"  @click='chooseStoreTap'>
                <div class='way-left flex'>
                    <img :src="!getWay?circle:circleActive"></img>
                    <span class='label'>门诊自取</span>
                </div>
                <div class='way flex'>
                    <span class='store overhidden'>{{getGoodsStore}}</span>
                    <span class="distance" :class="{'hidden': !storeDistance}">离你{{storeDistance}}</span>
                    <div class='choose'>选择门诊></div>
                </div>
            </div>
            <span class='tips' v-if="recipeDetail.paisong_status == 0">到门诊后报送姓名，手机号可以领取处方</span>
        </div>
        <!-- 药费计算 -->
        <div class='money-total wrap column'>
            <div class='total-item flex'>
                <span class='label'>{{recipeDetail.drugstorename}}</span>
            </div>
            <div class='total-item flex'>
                <span class='label'>药费：</span>
                <span class='money'>￥{{recipeDetail.drug_fee}}</span>
            </div>
            <div class='total-item border flex'>
                <span class='label'>快递费：</span>
                <span class='money'>￥{{express_money}}</span>
            </div>
            <div class='total-item border flex' v-if="recipeDetail.drugstatedjdaflag == 1 && instand">
                <span class='label'>服务费：</span>
                <span class='money'>￥{{recipeDetail.service_fee}}</span>
            </div>
            <div class='total-item total flex'>
                <span class='label'>合计：</span>
                <span class='money'>￥{{total_fee}}</span>
            </div>
        </div>
        <!-- 底部 -->
        <div class='footer flex'>
            <div class='service column' @click="serviceCall">
                <img src='../assets/service.png'></img>
                <span>客服</span>
            </div>
            <div class='total column'>
                <div class='price flex'>
                    处方费用：
                    <span>￥{{total_fee}}</span>
                </div>
                <span class='tips'>为保证效果，24:00小时后该处方失效</span>
            </div>
            <div class='pay-for-btn flex' @click='payforTap'>去支付</div>
        </div>
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <span>拼命加载中...</span>
        </div>
    </div>
</template>

<script>
import selectActive from "../assets/select-active.png";
import select from "../assets/select.png";
import circleActive from "../assets/circle-active.png";
import circle from "../assets/circle.png";
import { Toast } from 'mint-ui'
import {
  webconfig,
  recipebillinfo,
  payrecipe,
  binddoctorid
} from "./../api/index";
export default {
  data() {
    return {
      circleActive,
      circle,
      selectActive,
      select,
      status: "", //从哪进入页面的状态
      flag: true,
      getWay: false, //取药方式，false为快递寄送
      username: "", //我的姓名
      phone: "", //我的电话
      myAddress: "", //我的地址
      myAddress_id: "", //我的地址id
      durgType: [], //药态数组
      type: 0, //药态
      instand: false, //是否代煎，默认不代煎
      recipeid: "", //处方id
      recipeDetail: "", //处方详情
      getGoodsStore: "", //门诊地址
      storeDistance: "", //门诊距离
      drugstoreid: "", //门诊id
      layer: false, //蒙层
      locShow: false, //授权窗口显示/隐藏变量
      total_fee: 0.0, //合计费用
      showLoading: false, //加载中的变量
      express_money: "", //快递费
      change_express: "", //切换收货方式变化的快递费
      daijian_money: "", //代煎费
      servicePhone:'',
      outTime: 1500
    };
  },
  mounted() {
    if (this.$route.params.status) {
      this.status = this.$route.params.status;
      sessionStorage.setItem('buyStatus',this.$route.params.status)
    }else{
      this.status = sessionStorage.getItem('buyStatus')
    }
    if (this.$route.params.recipeid) {
      this.recipeid = this.$route.params.recipeid;
      sessionStorage.setItem('buyRecipeid',this.$route.params.recipeid)
    }else{
      this.recipeid = sessionStorage.getItem('buyRecipeid')
    }
    
    //获取门诊自取的门诊信息
    let durgStoreData = JSON.parse(sessionStorage.getItem("durgStoreData"));
    let addressData = JSON.parse(sessionStorage.getItem("addressData"));
    //门诊地址
    if (durgStoreData) {
      this.getGoodsStore = durgStoreData.name
      this.storeDistance = durgStoreData.distance
      this.drugstoreid = durgStoreData.clinicid
      this.getWay = true
      this.express_money = 0
      //获取订单信息
      this.getRecipeDetail();
      sessionStorage.removeItem("durgStoreData");
    } else {
      this.getLocation();
    }
    //获取快递收货地址信息
    if (addressData) {
      this.express_money = this.change_express;
      this.username = addressData.name;
      this.phone = addressData.mobile;
      this.myAddress = addressData.area;
      this.myAddress_id = addressData.id;
      this.countTotalFee();
      sessionStorage.removeItem("addressData");
    }
  },
  methods: {
    getRecipeDetail() {
      let mstr = sessionStorage.getItem("mstr");
      recipebillinfo(mstr, this.recipeid).then(res => {
        if (res.data.status === 1) {
          //计算代煎服务费
          res.data.data.service_fee = (
            this.daijian_money * res.data.data.quantity
          ).toFixed(2);
          this.recipeDetail = res.data.data;
          this.countTotalFee();
        }
        this.showLoading = false;
      });
    },
    //获取页面信息
    getLocation() {
      let mstr = sessionStorage.getItem("mstr");
      webconfig(mstr).then(res => {
        if (res.data.status === 1) {
          this.express_money = res.data.data.express_money
          this.change_express = res.data.data.express_money
          this.daijian_money = res.data.data.daijian_money
          this.servicePhone = res.data.data.kf_phone
          this.getRecipeDetail()
        }
      });
    },
    //计算总价
    countTotalFee() {
      if (this.recipeDetail.drugstatedjdaflag == 1) {
        //如果需要代煎，总价需要加上服务费
        if (this.instand) {
          //判断是否快递寄送
          if (!this.getWay) {
            this.total_fee = (
              this.recipeDetail.service_fee * 1 +
              this.recipeDetail.drug_fee * 1 +
              this.express_money * 1
            ).toFixed(2);
          } else {
            this.total_fee = (
              this.recipeDetail.service_fee * 1 +
              this.recipeDetail.drug_fee * 1 
            ).toFixed(2);
          }
        } else {
          //不需要代煎的话继续判断是否需要快递寄送
          if (!this.getWay) {
            this.total_fee = (
              this.recipeDetail.drug_fee * 1 +
              this.express_money * 1 
            ).toFixed(2);
          } else {
            this.total_fee = (
              this.recipeDetail.drug_fee * 1 
            ).toFixed(2);
          }
        }
      } else {
        //不需要代煎的话继续判断是否需要快递寄送
        if (!this.getWay) {
          this.total_fee = (
            this.recipeDetail.drug_fee * 1 +
            this.express_money * 1 
          ).toFixed(2);
        } else {
          this.total_fee = (
            this.recipeDetail.drug_fee * 1 
          ).toFixed(2);
        }
      }
    },
    //是否代煎
    instandTap(e) {
      this.instand = !this.instand;
      this.countTotalFee();
    },
    //选择收货地址
    chooseAddressTap() {
      this.$router.push({
        name: "address"
      });
    },
    //去地图选择门诊
    chooseStoreTap() {
      this.$router.push({
        name: "map",
        params: {
          status: "get",
          recipeid: this.recipeid
        }
      });
    },
    //去查看药态详细介绍
    godurgIntro(drugstateid, drugstatename) {
      this.$router.push({
        name: "durgIntro",
        params: {
          id: drugstateid,
          name: drugstatename
        }
      });
    },
    //购买处方
    payforTap() {
      let delivery_type = 1;
      let decoct_fee = 0;
      let instand = 0;
      if (this.getWay) {
        //取药方式为门诊自取
        delivery_type = 3;
        if (!this.getGoodsStore) {
          Toast({
            message: "请选择门诊地址",
            position: "center",
            duration: 2000
          });
          return false;
        }
      } else {
        delivery_type = 1;
        if (!this.username) {
          Toast({
            message: "请选择送货地址",
            position: "center",
            duration: 2000
          });
          return false;
        }
      }
      if (this.instand) {
        decoct_fee = this.recipeDetail.service_fee;
        instand = 1;
      }
      let options = {
        mstr: sessionStorage.getItem("mstr"),
        recipeid: this.recipeid,
        address_id: this.myAddress_id,
        money: this.total_fee,
        delivery_type: delivery_type,
        drugstoreid: this.drugstoreid,
        carriage_fee: this.express_money,
        decoct_fee: decoct_fee,
        djdaflag: instand
      };
      if (this.flag) {
        this.flag = false;
        payrecipe(options).then(res => {
          if (res.data.status === 1) {
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                debug: true,
                appId: "wx3fcdf896d0627cb9", //公众号名称，由商户传入
                timeStamp: res.data.data.timeStamp.toString(), //时间戳，自1970年以来的秒数
                nonceStr: res.data.data.nonceStr, //随机串
                package: res.data.data.package,
                signType: res.data.data.signType, //微信签名方式：
                paySign: res.data.data.paySign, //微信签名
                //这里的信息从后台返回的接口获得。
                jsApiList: ["chooseWXPay"]
              },
              res => {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  Toast({
                    message: "支付成功",
                    position: "center",
                    duration: 2000
                  });
                  //如果用户是扫码进入的，支付成功之后绑定该医生
                  if (this.status == "scane") {
                    this.binddoctor();
                  }else{
                    let payforData = {
                      payforStatus: "success",
                      recipeid: this.recipeid,
                      type: 0
                    }
                    sessionStorage.setItem("payforData", JSON.stringify(payforData));
                    setTimeout(() => {
                      this.$router.back(-1);
                    }, this.outTime);
                  }
                  this.flag = true
                } else {
                  alert("取消支付！");
                  this.consultShow = false;
                  this.layer = false;
                  this.flag = true;
                }
              }
            );
          }else{
            Toast({
              message: res.data.info,
              position: "center",
              duration: 2000
            });
          }
        });
      }
    },
    //绑定医生
    binddoctor() {
      let mstr = sessionStorage.getItem("mstr");
      let option = {
        mstr,
        doctorid: this.recipeDetail.doctorid,
        source: "扫码"
      };
      binddoctorid(option).then(res => {
        if (res.data.status === 1) {
          this.$router.push({
            name: "fillDurg"
          });
        } else {
          Toast({
            message: res.data.info,
            position: "center",
            duration: 2000
          });
        }
      });
    },
    //拨打客服电话
    serviceCall(){
      location.href = 'tel:'+ this.servicePhone
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/buyDrug/buyDrug.wxss */

.page {
  background: #ebe7e1;
  padding-bottom: torem(113px);
}

.wrap {
  background: #fff;
  border-radius: torem(10px);
  margin: 0 torem(30px);
}

.border {
  border-bottom: 1px solid #f2e3d0;
}

/* 医生患者信息 */

.doctor-info-wrap {
  position: relative;
}

.doctor-info-wrap .info-bg {
  width: 100%;
  height: torem(200px);
}

.doctor-info-wrap .doctor-info {
  margin-top: torem(-100px);
}

.doctor-info-wrap .doctor-info {
  padding: 0 torem(20px);
}

.doctor-info .doctor {
  position: relative;
  padding: torem(25px);
  font-size: torem(28px);
  align-items: center;
}

.doctor > img {
  width: torem(140px);
  height: torem(140px);
  border-radius: 50%;
  border: torem(4px) solid #f0b96a;
  position: absolute;
  left: torem(10px);
  top: torem(-44px);
}

.doctor .info {
  margin-left: torem(160px);
}

.doctor .info .name {
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
}

.doctor .info .intro {
  color: #808080;
  font-size: torem(26px);
  width: torem(500px);
  margin-top: torem(5px);
}

.doctor .label {
  font-size: torem(30px);
  color: #333;
  font-weight: bold;
}

/* 处方信息 */

.recipe-wrap {
  margin: 0 torem(30px);
}

.recipe-wrap .title {
  padding: torem(32px) 0 torem(18px) 0;
  font-size: torem(32px);
  color: #333;
  font-weight: bold;
  align-items: center;
}

.recipe-wrap .title span {
  font-weight: normal;
  color: #808080;
  font-size: torem(22px);
}

.recipe-wrap .recipe {
  width: 100%;
  border-radius: torem(10px);
  background: #fff;
}

.recipe-wrap .recipe .status-wrap {
  width: torem(654px);
  margin: 0 auto;
  padding: torem(22px) 0;
  align-items: center;
  justify-content: space-between;
}

.status-wrap .status {
  color: #db5034;
  font-size: torem(28px);
  font-weight: bold;
}

.status-wrap .total {
  color: #333;
  font-size: torem(24px);
}
.status-wrap .content {
  color: #333;
  font-size: torem(28px);
}
.status-wrap .quantity {
  color: #ba8d56;
  font-size: torem(24px);
  height: 100%;
  width: 100%;
  justify-content: flex-end;
}

.recipe .tips {
  color: #666;
  font-size: torem(20px);
  padding: 0 torem(20px) torem(20px) torem(20px);
}
.recipe .tips.margin {
  margin-top: torem(20px);
}
.durg-wrap .durg-item {
  padding: torem(20px) torem(24px);
  border-bottom: 1px solid #f0d7b9;
}

.durg-wrap .durg-item:last-child {
  border-bottom: 0;
}
.durg-item .durg-intro{
  align-items: center;
}
.durg-item .durg-left {
  margin-right: torem(20px);
  align-items: center;
}

.durg-item .durg-left img {
  width: torem(112px);
  // height: torem(90px);
  border-radius: torem(6px);
}

.durg-item .durg-left .circle {
  width: torem(24px);
  height: torem(24px);
  margin-right: torem(20px);
}

.durg-item .durg-right {
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.durg-right .durg-name {
  color: #333;
  font-size: torem(28px);
  font-weight: bold;
}

.durg-right .durg-name .intro {
  color: #4d4d4d;
  font-size: torem(22px);
  font-weight: normal;
  margin-top: torem(10px);
}

.durg-right .question {
  max-width: torem(300px);
  height: torem(80px);
  line-height: torem(80px);
  font-size: torem(22px);
  color: #808080;
}

/* 代煎服务 */

.instand {
  padding: torem(10px) 0 0 0;
}

.instand .instand-up {
  align-items: center;
  color: #5c5c5c;
  font-size: torem(26px);
  margin-bottom: torem(10px);
}

.instand-up img {
  width: torem(32px);
  height: torem(32px);
  margin-right: torem(0px);
}

.instand-down {
  color: #999;
  font-size: torem(24px);
  align-items: center;
}

.instand-down > span {
  color: #db5034;
}

/* 取药方式 */

.get-way-wrap {
  margin: torem(15px) torem(30px);
  padding: 0 torem(24px) torem(20px) torem(24px);
}
.distance.hidden {
  opacity: 0;
}

/* 药费计算 */

.money-total {
  padding: 0 torem(23px);
  font-size: torem(28px);
  margin-bottom: torem(70px);
}

.money-total .total-item {
  padding: torem(22px) 0 torem(5px) 0;
  justify-content: space-between;
}
.money-total .total-item.total {
  padding: torem(15px) 0 torem(15px) 0;
}

.money-total .border {
  font-size: torem(24px);
  padding: torem(15px) 0;
}

.total-item .money {
  color: #db5034;
}

/* 底部 */

.footer {
  height: torem(113px);
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  max-width: 750px;
  padding: 0 torem(30px);
  align-items: center;
  background: #fff;
  justify-content: space-between;
}

.footer .service {
  color: #333;
  font-size: torem(24px);
  font-weight: bold;
  align-items: center;
  margin-right: torem(50px);
  display: flex;
}

.footer .service img {
  width: torem(52px);
  height: torem(55px);
  margin-bottom: torem(10px);
}

.footer .total {
  flex: 1;
}

.total .price {
  align-items: center;
  color: #333;
  font-size: torem(28px);
  font-weight: bold;
}

.footer .total .tips {
  color: #808080;
  font-size: torem(22px);
  margin-top: torem(10px);
}

.total .price span {
  color: #db5034;
  font-size: torem(26px);
  font-weight: normal;
}

.footer .pay-for-btn {
  width: torem(140px);
  height: torem(80px);
  background-color: #db5034;
  border-radius: torem(10px);
  align-items: center;
  justify-content: center;
  font-size: torem(30px);
  color: #fff;
}
/* 获取地理位置弹窗 */
.location-windows {
  width: torem(560px);
  height: torem(400px);
  background: #fff;
  border-radius: torem(10px);
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.location-windows img {
  width: torem(50px);
  height: torem(50px);
  position: absolute;
  right: torem(20px);
  top: torem(20px);
  display: block;
}
.location-windows .txt {
  color: #333333;
  font-size: torem(30px);
  margin: torem(80px) 0 torem(20px) 0;
  display: block;
  width: 100%;
  span-align: center;
}
.location-windows .accredit-btn {
  width: torem(266px);
  height: torem(80px);
  background-color: #db5034;
  border-radius: torem(6px);
  color: #ffffff;
  font-size: torem(30px);
  margin: torem(50px) 0 torem(80px) 0;
  align-items: center;
  justify-content: center;
}
.get-wrap .picker {
  padding-right: 0;
}
</style>